<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NPM 搜索</title>

    <!-- compiled and minified CSS & JS --> 

    <!-- 引入 jquery -->
    <script src="./assets/jquery/js/jquery.min.js"></script>

    <!-- 引入 bootstrip -->
    <link rel="stylesheet"  href="./assets/bootstrap3/css/bootstrap.min.css">
    <script src="./assets/bootstrap3/js/bootstrap.min.js"></script>

    <!-- 引入 Font Awesome 样式(依赖 ../fonts) -->
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" />

    <!-- 引入 clipboard -->
    <script src="assets/clipboard/js/clipboard.min.js"></script>

    <!-- 自定义 Youwant -->
    <link rel="stylesheet" href="assets/youwant/css/scrollbar.css" >
    <script src="assets/youwant/js/element.js"></script>
    <script src="assets/youwant/js/utils.js"></script>
    
</head>
<body>
    
    <!-- <h2 class="text-center">Bootstrap 3</h2> -->

    <div class="container">
        <h1>NPM 搜索</h1>
        <nav class="navbar navbar-default navbar-inverse" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <!-- 综合折叠 -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#" >
                    <img class="pull-left logo" style="width: 1em" src="./assets/youwant/img/youwant-creator.png" />
                </a>
            </div>
        
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/pastebin">Pastebin</a></li>
                    <li class="active"><a href="/npmsearch">NPM 搜索</a></li>
                    <li><a href="/fileupload">文件上传</a></li>
                </ul>
                
                <ul class="nav navbar-nav navbar-right">
                    <div class="navbar-form navbar-right">
                        <div class="input-group">
                            <div for=""  class="input-group-addon">关键词</div>
                            <input id="key-text" type="text" class="form-control"/>
                        </div>
                        <button id="btn-search" type="button" class="btn btn-default">搜索</button>
                    </div>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>

        <div class="panel panel-default">

            <div class="panel-body">
                <table class="table table-striped table-hover">
                    <thead class="text-nowrap" style="word-break: keep-all;">
                        <tr>
                            <th class="text-center">编号</th>
                            <th>包名称</th>
                            <th class="text-center">版本号</th>
                            <th class="text-center">日期</th>
                            <th class="text-center hidden-xs hidden-sm">Publisher</th>
                            <th class="text-center hidden-xs hidden-sm">说明</th>
                            <th class="text-center">操作</th>
                        </tr>
                    </thead>
                    <tbody id="tbody_item" class="text-nowrap">
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        var tbody_item = $("#tbody_item")[0];

        var data = [
            {
                "name": "bootstrap",
                "version": "5.1.3",
                "date": {
                    "ts": 1633793251914,
                    "rel": "6 months ago"
                },
                "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
                "publisher": {
                    "name": "xhmikosr",
                    "avatars": {
                        "small": "/npm-avatar/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdmF0YXJVUkwiOiJodHRwczovL3MuZ3JhdmF0YXIuY29tL2F2YXRhci9jMGRjNGY3ZTIxMGI4MzA5OTdkMmVlMGEyYWVmNWM0Nj9zaXplPTUwJmRlZmF1bHQ9cmV0cm8ifQ.ntdFWfIv_7lrwmSy2g1xTOmQ3MQBIYJLBvneHoqbJcg",
                        "medium": "/npm-avatar/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdmF0YXJVUkwiOiJodHRwczovL3MuZ3JhdmF0YXIuY29tL2F2YXRhci9jMGRjNGY3ZTIxMGI4MzA5OTdkMmVlMGEyYWVmNWM0Nj9zaXplPTEwMCZkZWZhdWx0PXJldHJvIn0.vMFDSbEcwqw-0Bs5-Uq6wm_Ycx85yG2ruO4Ln4oQFnM",
                        "large": "/npm-avatar/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdmF0YXJVUkwiOiJodHRwczovL3MuZ3JhdmF0YXIuY29tL2F2YXRhci9jMGRjNGY3ZTIxMGI4MzA5OTdkMmVlMGEyYWVmNWM0Nj9zaXplPTQ5NiZkZWZhdWx0PXJldHJvIn0.Gy5HIexLOEbeDi6RnAJ04T0HzeWdvVToxDPSaOvXDPs"
                    },
                    "created": {
                        "ts": null,
                        "rel": "Invalid date"
                    },
                    "email": "xhmikosr@gmail.com"
                },
            },
            {
                "name": "less",
                "version": "4.1.2",
                "date": {
                    "ts": 1633303087340,
                    "rel": "7 months ago"
                },
                "description": "Leaner CSS",
                "publisher": {
                    "name": "matthew-dean",
                    "avatars": {
                        "small": "/npm-avatar/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdmF0YXJVUkwiOiJodHRwczovL3MuZ3JhdmF0YXIuY29tL2F2YXRhci82OWI0YmQ5YzBkOWEyZTRjZjY0Y2FiM2I3ZGRhODY5YT9zaXplPTUwJmRlZmF1bHQ9cmV0cm8ifQ.mTYeOLLb2oB0oKf_LNXg1hxE-kMhK65ro3KaRIIxfH0",
                        "medium": "/npm-avatar/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdmF0YXJVUkwiOiJodHRwczovL3MuZ3JhdmF0YXIuY29tL2F2YXRhci82OWI0YmQ5YzBkOWEyZTRjZjY0Y2FiM2I3ZGRhODY5YT9zaXplPTEwMCZkZWZhdWx0PXJldHJvIn0.xtTIdy-wQOHuYhAA6DU9BH2tp-UJJiSUEleRAdPN3JM",
                        "large": "/npm-avatar/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdmF0YXJVUkwiOiJodHRwczovL3MuZ3JhdmF0YXIuY29tL2F2YXRhci82OWI0YmQ5YzBkOWEyZTRjZjY0Y2FiM2I3ZGRhODY5YT9zaXplPTQ5NiZkZWZhdWx0PXJldHJvIn0.6HZG2hn8YfgK3ysd6LLT3ZsgXidpJIPvdFbwGhH0u8s"
                    },
                    "created": {
                        "ts": null,
                        "rel": "Invalid date"
                    },
                    "email": "matthewdean.me@gmail.com"
                },
            }
        ]

        function clean() {
            for (let index = tbody_item.rows.length - 1; index >= 0; index--) {
                tbody_item.deleteRow(index)
            }
        }

        function createElement(data,i) {
            let tr = document.createElement('tr');

            let th_id          = document.createElement('th')
            let td_name        = document.createElement('td')
            let td_version     = document.createElement('td')
            let td_release     = document.createElement('td')
            let td_publisher   = document.createElement('td')
            let td_description = document.createElement('td')
            let td_operation   = document.createElement('td')
            
            // 
            let td_operation_button = document.createElement("button")
            td_operation_button.innerHTML = "复制"
            td_operation_button.setAttribute("class", "btn btn-primary")
            td_operation_button.setAttribute("package-name", data[i]["name"])
            $(td_operation_button).on("click", ()=>{
                let package_name = $(td_operation_button).attr("package-name")
                // let pastebin_content = $("#modal-show").attr("pastebin-content")
                const textCopied = ClipboardJS.copy(String("npm install " + package_name));
            })
            td_operation.appendChild(td_operation_button)
            // 

            const element = data[i];
            
            let timestamp4 = new Date(data[i]["date"]["ts"])
            let datetime = timestamp4.toLocaleDateString().replace(/\//g, "-") 
                            + " " 
                            + timestamp4.toTimeString().substr(0, 8) 
                            + "<br/>("+data[i]["date"]["rel"]+")"

            let description = String(data[i]["description"]).length > 30
                                ? String(data[i]["description"]).substring(0, 30)
                                    +"..."
                                : data[i]["description"]
    
            let publisher = data[i]["publisher"]["name"]
                             + "</br>" 
                             + data[i]["publisher"]["email"]

            th_id         .innerHTML = i+1
            td_name       .innerHTML = data[i]["name"]
            td_version    .innerHTML = data[i]["version"]
            td_release    .innerHTML = datetime
            td_publisher  .innerHTML = publisher
            td_description.innerHTML = description
            

            th_id         .setAttribute("style", "word-break: keep-all; text-align: center;")
            td_name       .setAttribute("style", "word-break: keep-all; ")
            td_version    .setAttribute("style", "word-break: keep-all; text-align: center;")
            td_release    .setAttribute("style", "word-break: keep-all; text-align: center;")
            td_publisher  .setAttribute("style", "word-break: keep-all; text-align: center;")
            td_publisher  .setAttribute("class", "hidden-xs hidden-sm")
            td_description.setAttribute("style", "word-break: break-word; ")
            td_description.setAttribute("class", "hidden-xs hidden-sm")
            td_operation  .setAttribute("class", "text-center");

            tr.appendChild(th_id         );
            tr.appendChild(td_name       );
            tr.appendChild(td_version    );
            tr.appendChild(td_release    );
            tr.appendChild(td_publisher);
            tr.appendChild(td_description);
            tr.appendChild(td_operation);

            tbody_item.appendChild(tr)
        }

        $(document).ready(function() {
            clean()
            for (let i = 0; i < data.length; i++) {
                createElement(data, i)
            }
        })

        $("#key-text").bind("keydown", function(e){
            let code = e.keyCode;
            if (code == 13) {
                npm_search()
            }
        })


        // $("#key-text").on("change", function(){
            // createElement([
            //     {
            //         "name": $("#key-text").val(),
            //         "version": "4.1.2",
            //         "description": "Leaner CSS",
            //     }
            // ], 0)
            
        // })

        $("#btn-search").on("click", function(){
            npm_search()
        })

        function npm_search() {
            let val = $("#key-text").val()
            if (val == "") { return }

            $.ajax({
                // url: "https://www.npmjs.com/search?q="+$("#key-text").val(),
                // url: "./bootstrap.json",
                url: "/npmsearch/search?q="+$("#key-text").val(),
                method: "GET",
                // headers: {
                //     "Access-Control-Allow-Origin": "*",
                //     "Access-Control-Allow-Headers": "X-Requested-With",
                //     "Access-Control-Allow-Methods": "PUT,POST,GET,DELETE,OPTIONS",
                // },
                xhrFields:{
                    withCredentials:'true'
                },
                crossDomain: true,
                success: function (data, textStatus, jqXHR){
                    clean()

                    let json = JSON.parse(data)


                    let objects = JSON.parse(data)["objects"]
                    let packages = []
                    for (let i = 0; i < objects.length; i++) {
                        const element = objects[i];
                        packages.push(element["package"])
                    }
                    for (let i = 0; i < packages.length; i++) {
                        // const element = packages[i];
                        createElement(packages,i)
                    }
                }
            })
        }


    </script>

</body>
</html>

